﻿<template>
  <a-drawer
    :title="title"
    width="40%"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleSubmit"
    @close="
      () => {
        this.visible = false
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
        <a-form-model-item label="客户名称" prop="CustomerId">
          <a-select
            show-search
            v-model="entity.CustomerId"
            placeholder="检索客户(名称/编号)(省市区名称禁止查询)"
            :default-active-first-option="false"
            :show-arrow="false"
            :filter-option="false"
            @search="handleSearch"
            @change="handleChange"
          >
            <a-select-option v-for="d in searchdata" :key="d.Id" :value="d.Id">
              {{ d.cCusName + '(' + d.cCusCode + ')' }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="工单类型" prop="SWOType">
          <a-select
            v-model="entity.SWOType"
            style="width: 100%"
            placeholder="工单类型"
          >
            <a-select-option v-for="item in list" :key="item.Id" :value="item.DicName">
              {{ item.DicName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="工单标题" prop="SWOTitle">
          <a-input
            v-model="entity.SWOTitle"
            autocomplete="off"
            placeholder="工单标题"
          />
        </a-form-model-item>
        <!-- 样品服务 -->
        <a-form-model-item label="关联单号" :prop="entity.SWOType === '样品服务' ? 'RelationNo' : ''">
          <Sample
            :disabled="entity.SWOType !== '样品服务'"
            v-model="entity.RelationNo"
            :flag="flag"
            @onSample="onSample"
          />
        </a-form-model-item>
        <a-form-model-item label="开始日期" prop="StartTime">
          <a-date-picker
            format="YYYY-MM-DD"
            :disabled="title === '查看工单'"
            style="width: 100%"
            v-model="entity.StartTime"
          />
        </a-form-model-item>
        <a-form-model-item label="截止日期" prop="EndTimeRqstd">
          <a-date-picker
            format="YYYY-MM-DD"
            :disabled="title === '查看工单'"
            style="width: 100%"
            v-model="entity.EndTimeRqstd"
          />
        </a-form-model-item>
        <a-form-model-item label="执行人" prop="SalesmanId">
          <SalesmanSelect v-model="entity.SalesmanId" :disabled="title === '查看工单'"/>
        </a-form-model-item>
        <a-form-model-item label="工单内容" prop="EndTimeRqstd">
          <a-textarea v-model="entity.SWOContent" :disabled="title === '查看工单'" autocomplete="off"/>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
    <div style="height: 50px"></div>
    <div
      :style="{
        position: 'absolute',
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e8e8e8',
        padding: '10px 16px',
        textAlign: 'right',
        left: 0,
        background: '#fff',
        borderRadius: '0 0 4px 4px'
      }"
    >
      <a-button style="margin-right: 8px" @click="visible = false"> 取消</a-button>
      <a-button v-if="title != '查看工单'" type="primary" @click="handleSubmit"> 保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
import moment from 'moment'
import Sample from '@/components/Sample/List.vue' // 样品

import SalesmanSelect from '@/components/Salesman/SalesmanSelect.vue'

export default {
  components: {
    SalesmanSelect,
    Sample
  },
  props: {
    parentObj: Object
  },
  data () {
    return {
      list: [],
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      visible: false,
      flag: false,
      loading: false,
      entity: {},
      rules: {
        RelationNo: [{ required: true, message: '未输入', min: 5, trigger: 'blur' }],
        CustomerId: [{ required: true, message: '未输入', trigger: 'blur' }],
        SWOTitle: [{ required: true, message: '未输入', trigger: 'blur' }],
        SWOType: [{ required: true, message: '未输入', trigger: 'blur' }],
        SalesmanId: [{ required: true, message: '未输入', trigger: 'change' }]
      },
      title: '',
      searchdata: [],
      page: null
    }
  },
  created () {
    this.getSelsct()
  },
  methods: {
    onSample (a) {
      this.$set(this.entity, 'RelationNo', a.DocumentNo)
    },
    OnCusName (row) {
      this.$set(this.entity, 'CustomerName', row.cCusName)
      this.$set(this.entity, 'CustomerId', row.Id)
    },
    closeMode (row) {
      this.$set(this.entity, 'CustomerName', row.cCusName)
      this.$set(this.entity, 'CustomerId', row.Id)
    },
    getSelsct () {
      this.$http
        .post('/Base_BasicData/Base_DictionaryMain/GetTheDataByDicKey', {
          Condition: 'DicKey',
          Keyword: 'WorkOrderType'
        })
        .then(res => {
          if (res.Success) {
            this.list = res.Data.DictionaryDetailsList
          }
        })
    },
    init () {
      this.visible = true
      this.entity = {}
      this.searchdata = []
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    openForm (record, title, flag, page) {
      this.init()
      this.title = title
      this.flag = flag
      this.page = page
      if (record) {
        this.loading = true
        this.$http.post('/SWOManagement/ServiceWorkOrderMain/GetTheDataForDetail', { id: record.Id }).then(resJson => {
          this.loading = false
          this.entity = resJson.Data
          this.getTheData(this.entity.CustomerId)
          if (this.entity.SWOAList && this.entity.SWOAList.length > 0) {
            this.$set(
              this.entity,
              'SalesmanId',
              this.entity.SWOAList.map(item => item.ExecutorId + '-' + item.ExecutorName)
            )
          }
          if (this.entity['StartTime']) {
            this.entity['StartTime'] = moment(this.entity['StartTime'])
          }
          if (this.entity['EndTimeRqstd']) {
            this.entity['EndTimeRqstd'] = moment(this.entity['EndTimeRqstd'])
          }
        })
      }
    },
    handleSubmit () {
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        if (this.entity.SalesmanId) {
          this.entity.SWOAList = this.entity.SalesmanId.map(item => {
            return {
              ExecutorId: item.split('-')[0],
              ExecutorName: item.split('-')[1]
            }
          })
        }

        this.loading = true
        this.$http.post('/SWOManagement/ServiceWorkOrderMain/SaveData', this.entity).then(resJson => {
          this.loading = false

          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false

            this.parentObj.getDataList()
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    },
    handleChange (id) {
      var obj = this.searchdata.find(val => {
        return val.Id === id
      })
      this.$set(this.entity, 'CustomerName', obj.cCusName)
    },
    handleSearch (keyword) {
      console.log(keyword)
      if (keyword) {
        this.getSearch(keyword)
      } else {
        this.searchdata = []
      }
    },
    getSearch (word) {
      this.$http
        .post('/CustomerManagement/CustomerInfo/GetDataListForCustomerInfoRetrieval', {
          PageIndex: 1,
          PageRows: 999,
          SortField: 'cCusCode',
          SortType: 'desc',
          Search: { cCusName: word, cCusType: null }
        })
        .then(resJson => {
          if (resJson.Success) {
            this.searchdata = resJson.Data
          } else {
            this.$message.error(resJson.Msg)
            this.searchdata = []
          }
        })
    },
    filterOption (input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    getTheData (id) {
      this.$http.post('/CustomerManagement/CustomerInfo/GetTheData', { id }).then(res => {
        if (res.Success) {
          if (res.Data) {
            this.searchdata = [res.Data]
          } else {
            this.searchdata = []
          }
        } else {
          this.$message.error(res.Msg)
        }
      })
    }
  }
}
</script>
